:root {
  --color-primary-light: #3159fc;
  --el-color-primary: #0c80ff;
  --el-border-radius-base: 6px;
}

#app {
  background: #eff2f9;
}
.page-head {
  flex-shrink: 0;
  background: #ffffff;
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.03);
  border-radius: 2px;
  margin-bottom: 10px;
  padding: 5px 10px;
}
.page-body {
  overflow: auto;
  flex-grow: 1;
  background: #ffffff;
  box-shadow: 0px 8px 22px 1px rgba(47, 81, 126, 0.12);
  border-radius: 8px 8px 8px 8px;
}
.action-bar {
  height: 64px;
  padding: 5px 10px;
}
.view-hide {
  width: 0;
  min-width: 0;
}
.view-hide .view-detail {
  display: none;
}
.width-100 {
  width: 100%;
}
.width-50 {
  width: 50%;
  min-width: 840px;
}
.view-trigger {
  position: absolute;
  top: 50%;
  --view-trigger-w: 30px;
  left: calc(var(--view-trigger-w) * -1);
  width: var(--view-trigger-w);
  height: 120px;
  margin-top: -60px;
  border-radius: 12px 0 0 12px;
  background-color: #0c80ff;
  color: white;
  line-height: 22px;
  text-align: center;
  user-select: none;
}
.view-trigger .icon {
  margin-top: 5px;
}

.node-active::before {
  position: absolute;
  content: "";
  --node-active-padding: -6px;
  left: var(--node-active-padding);
  right: var(--node-active-padding);
  bottom: var(--node-active-padding);
  top: var(--node-active-padding);
  border: 1px solid var(--el-color-primary);
  box-shadow: 0 0 10px #0c81ff71 inset;
  border-radius: 10px;
  z-index: -2;
}
.margin-right-10px {
  margin-right: 10px;
}
.el-radio__input.is-checked .el-radio__inner {
  background: unset;
}
.el-radio__inner::after {
  width: 50%;
  height: 50%;
  background-color: var(--el-color-primary);
}
.el-dialog {
  --el-dialog-border-radius: var(--el-border-radius-base);
}
.el-dialog__body {
  padding: calc(var(--el-dialog-padding-primary)) var(--el-dialog-padding-primary);
}
.el-dialog__title {
  padding: 0 10px;
  border-left: 4px solid var(--el-color-primary);
}
.el-table .cell {
  /* padding: 0 0px; */
}
